//重点指标实时监控
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Radio, Select, Button, message, DatePicker, Collapse, Checkbox, Row, Col, Tag, Divider, Popconfirm } from 'antd';
import styles from './IndeicatorAlarm.less';
import MyTable from '../../../components/common/MyTable';
import Filtrate from '../../../components/common/Filtrate';
import update from 'immutability-helper';
import request from '../../../utils//request';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import Echarts_ONE from '../echarts/Echarts_ONE';
import Container from "../../../components/common/Container";
import PublicService from "../../../services/PublicService";
import PublicTemplate from '../../../services/PublicTemplate';
import MyPagination from "../../../components/common/MyPagination";
import config from '../../../config';
import AddModal from './sub/AddModal';
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;
class IndeicatorAlarm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: [],
            timeList: [],
            alarmStatus: '',
            modal1Visible: false,
            tableLoading: false,
            dataSate: [],
            params: {},
            pageSize: 10,
            pageIndex: 1,
            total: 0,
            addModal: false,
            columns: [

                {
                    dataIndex: 'num',
                    title: '序号',
                    key: 'num',
                    width: 50,
                    render: (text, record) => <span>
                        {text}
                        <span style={{ width: 5, height: 20, backgroundColor: record.alarmStatus == 1 ? "#52c41a" : "#fc1808", position: "absolute", left: 0 }}>
                        </span>
                    </span>
                }, {
                    dataIndex: 'insertTime',
                    title: '报警时间',
                    key: 'insertTime',
                    width: 130,
                    render: (text, record) => <span>
                        {moment(text).format("YYYY-MM-DD HH:mm:ss")}

                    </span>
                },
                {
                    dataIndex: 'companyName',
                    title: '项目公司',
                    key: 'companyName',
                    width: 130,
                }, {
                    dataIndex: 'kpiName',
                    title: '指标名称',
                    key: 'kpiName',
                    width: 130,
                }, {
                    dataIndex: 'alarmType',
                    title: '报警级别',
                    key: 'alarmType',
                    width: 130,
                    render: (text, record) => <span>
                        {text == 1 ? '一般报警' : '重要报警'}

                    </span>
                }, {
                    dataIndex: 'alarmStatus',
                    title: '报警状态',
                    key: 'alarmStatus',
                    width: 130,
                    render: (text, record) => <span>
                        {text == 1 ? '已解除' : '未解除'}

                    </span>
                },
                {
                    dataIndex: 'id',
                    title: '操作',
                    key: 'id9',
                    width: 150,
                    render: (text, record, index) => {
                        return (

                            <span>
                                {
                                    record.alarmStatus != 1 ? <span>
                                        <Popconfirm
                                            title="确定解除报警?"
                                            onConfirm={this.confirm.bind(this, record)}
                                            // onCancel={cancel}
                                            okText="确定"
                                            cancelText="取消"
                                        >
                                            <a src="javascript:" >解除报警</a>
                                        </Popconfirm>
                                        <Divider type="vertical" /></span> : ''
                                }

                                <a src="javascript:" onClick={this.onPrint.bind(this, record)}>查看</a>
                                {/* <Divider type="vertical" /> */}

                            </span>
                        )
                    }
                }
            ],
            options: [],
            startValue: null,
            endValue: null,
            seeToday:false
        }



    }
    componentDidMount() {
        this.onSubmit(1, 10)

    }

    confirm = (record) => {
        console.log(record)
        request({
            url: '/sx-client/sx/kpiAlarm/releaseAlarm',
            method: 'POST',
            data: { id: record.id }
        }).then(data => {
            if (data.rc === 0) {
                message.success('解除报警成功')
            } else {
                message.warning(data.err)
            }
            this.onSubmit(1, 10)
        })
    }
    onPrint = (record) => {
        request({
            url: '/sx-client/sx/kpiAlarm/queryTheAlarm',
            method: 'POST',
            data: { id: record.id }
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    addModal: true,
                    moddleArr: [
                        {
                            type: 'input',
                            label: "项目公司",
                            paramName: "coalCalorific",
                            key: "coalCalorific",
                            initialValue: data.ret.kpiAlarm.companyName,
                            rules: [{ ...config.reg.required }],
                            style: { width: 270 },
                            disabled: true
                        },
                        {
                            type: 'input',
                            label: "指标名称",
                            paramName: "sulphurContent",
                            key: "sulphurContent",
                            initialValue: data.ret.kpiAlarm.kpiName,
                            rules: [{ ...config.reg.required }],
                            style: { width: 270 },
                            disabled: true
                        },
                        {
                            type: 'input',
                            label: "报警级别",
                            paramName: "moistureContent",
                            key: "moistureContent",
                            initialValue: data.ret.kpiAlarm.alarmType,
                            rules: [{ ...config.reg.required }],
                            style: { width: 270 },
                            disabled: true
                        },
                        {
                            type: 'input',
                            label: "报警时间",
                            paramName: "moistureContent",
                            key: "moistureContent",
                            initialValue: data.ret.kpiAlarm.insertTime,
                            rules: [{ ...config.reg.required }],
                            style: { width: 270 },
                            disabled: true
                        },
                    ],
                    dataList: data.ret.dataList,
                    timeList: data.ret.timeList
                })
            }

        })

    }
    onSubmit = (page, size) => {

        const params = this.f1.getForm().getFieldsValue();
        params.page = page;
        params.rows = size;
        params.alarmStatus = this.state.alarmStatus
        params.companyId = ''
        params.seeToday = this.state.seeToday?1:0
        // params.isDispose = this.state.status
        // params.isField = this.state.Radio ? 0 : ""
        if (params.time) {
            params.startTime = moment(params.time[0]).format('YYYY-MM-DD HH:mm:ss');
            params.endTime = moment(params.time[1]).format('YYYY-MM-DD HH:mm:ss');
        } else {
            params.startTime = '';
            params.endTime = '';
        }

        delete params.time;
        this.setState({
            params
        })

        request({
            url: '/sx-client/sx/kpiAlarm/pagingQueryKpiAlarm',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    dataSate: data.ret.items,
                    total: data.ret.count,
                })
            }
        })

    }


    // 分页
    onChangePage = (page, size) => {
        this.setTimeAndSearch(this.state.params, page, size);
        this.setState({
            pageSize: size,
            pageIndex: page,
        })
    };

    onChangePage1 = (page, size) => {

        this.setTimeAndSearch(this.state.params, 1, size);
        this.setState({
            pageSize: size,
            pageIndex: 1
        })
    };

    setTimeAndSearch = (val, pageIndex, row) => {

        console.log(val, pageIndex, row)
        val.page = pageIndex;
        val.rows = row;

        request({
            url: '/sx-client/sx/kpiAlarm/pagingQueryKpiAlarm',
            method: 'POST',
            data: val
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    dataSate: data.ret.items,
                    total: data.ret.count,
                })
            }
        })

    };

    // modal保存
    ModalOk = (val) => {




        val.id = this.state.id
        console.log(val)
        request({
            url: '/web/redstar/caralarmconfigurationcontroller/updateAlarmData',
            method: 'POST',
            data: val
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    addModal: false
                })
                message.success("编辑成功!")
                this.onSubmit(1, 10)
            }
        })


    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };

    //重置
    ResetForm = () => {
        this.setState({
            pageSize: 10,
            pageIndex: 1,
        })
        setTimeout(() => {
            this.onSubmit(1, 10)
        }, 500)
    }

    onTag = (v) => {
        this.setState({
            alarmStatus: v
        }, () => {
            this.onSubmit(1, 10)
        })

    }

    onRadio = (e) => {
        console.log(e)
        this.setState({
            seeToday:!this.state.seeToday
        },() => {
            this.onSubmit(1,10)
        })
    }








    render() {
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        let tableHeight = 230;
        if (width < 1920) {
            tableHeight = 270;
            containerHeight = '63vh';
        }
        const items = [
            {
                type: 'rangePicker',
                label: '报警时间',
                paramName: 'time',
                initialValue: null,
            },
            {
                type: 'input',
                label: '关键词',
                paramName: 'kpiName',
            },
            {
                type: 'select',
                label: '报警级别',
                paramName: 'alarmType',
                options: [
                    { text: '全部', value: '' },
                    { text: '一般报警', value: '1' },
                    { text: '重要报警', value: '2' },
                ],
            },

        ];
        const { timeList, dataList, options, footerShow, modalBtnLoading, modalTitle, dataSate, tableLoading, pageSize, pageIndex, total, columns, startValue, endValue, endOpen, CheckboxData, addModal } = this.state
        return (

            <div className={styles.warp}>
                {
                    addModal &&
                    <AddModal
                        // dataTypes={dataTypes}
                        width={600}
                        visible={addModal}
                        title={'查看'}
                        footerShow={false}
                        onModalSave={this.ModalOk.bind(this)}
                        onCancel={this.ModalCancel.bind(this, 'addModal')}
                        moddleArr={this.state.moddleArr}
                        dataList={dataList}
                        timeList={timeList}

                    />
                }
                <Tabs defaultActiveKey="1" className={styles.Tabs}>
                    <TabPane tab="全部" key="1">
                        <Filtrate
                            items={items}
                            ref={ref => { this.f1 = ref }}
                            submit={this.onSubmit.bind(this, 1, 10)}
                            ResetForm={this.ResetForm}
                        />
                        <Container
                            style={{ height: containerHeight, position: "relative", overflow: 'auto' }}
                        >
                            <div style={{ position: "absolute", top: 0, left: 50, width: "40%" }}>
                                <span>报警状态</span>
                                <Tag style={{ marginLeft: 15 }} color={this.state.alarmStatus === "" ? "#108ee9" : "blue"} onClick={this.onTag.bind(this, "")}>全部</Tag>
                                <Tag color={this.state.alarmStatus === 1 ? "#52c41a" : "green"} onClick={this.onTag.bind(this, 1)}>已解除</Tag>
                                <Tag color={this.state.alarmStatus === 0 ? "#fc1808" : "red"} onClick={this.onTag.bind(this, 0)}>未解除</Tag>
                            </div>

                            <div style={{ position: "absolute", top: 0, right: 50 }}>
                                <Radio checked={this.state.seeToday} onClick={this.onRadio}>仅看今日报警</Radio>
                            </div>
                            <MyTable
                                loading={tableLoading}
                                columns={columns}
                                scroll={{ y: height - tableHeight }}
                                dataSource={PublicService.transformArrayData(dataSate, true, true, pageIndex, pageSize)}
                                pagination={false}

                            />
                            <MyPagination
                                showPage
                                pageSize={pageSize}
                                total={total}
                                current={this.state.pageIndex}
                                showSizeChanger
                                showQuickJumper
                                onChange={this.onChangePage.bind(this)}
                                onShowSizeChange={this.onChangePage1.bind(this)}
                            />
                        </Container>

                    </TabPane>
                    <TabPane tab="再生能源" key="2">
                        Content of Tab Pane 2
                    </TabPane>
                    <TabPane tab="维尔利" key="3">
                        Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab="清运公司" key="4">
                        Content of Tab Pane 3
                    </TabPane>
                </Tabs>
            </div>
        )
    }


}

export default connect()(IndeicatorAlarm)